<script setup>
import {useTooltipContentProps} from "element-plus";
import {ref} from "vue";
import {useEventListener} from "@vueuse/core";

const props = defineProps({
  ...useTooltipContentProps,
  teleported: {
    type: Boolean,
    default: false
  },
  placement: {
    type: String,
    default: 'top'
  },
  overflowType: {
    type: String,
    default: 'ellipsis'
  }
})
const textRef = ref();
const disabled = ref(false);

useEventListener(textRef, 'mouseenter', () => {
  if (textRef.value?.scrollWidth > textRef.value?.offsetWidth) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
})
</script>

<template>
  <el-tooltip v-bind="props" :disabled="disabled">
    <div ref="textRef" class="truncate" :style="{textOverflow:overflowType}">{{ content }}</div>
  </el-tooltip>
</template>

<style scoped lang="scss">

</style>
